<div>
  <div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
    <d-demo-nav [navItems]="navItems"></d-demo-nav>
    <div class="devui-demo-example" [dAnchor]="'basic-usage'">
      <div class="devui-demo-title">{{ 'components.cascader.basicDemo.title' | translate }}</div>
      <d-codebox id="components-carousel-default" [sourceData]="cascaderBasicComponent">
        <d-demo-basic demo></d-demo-basic>
      </d-codebox>
    </div>

    <div class="devui-demo-example" [dAnchor]="'multiple-cascader'">
      <div class="devui-demo-title">{{ 'components.cascader.multipleDemo.title' | translate }}</div>
      <d-codebox id="components-carousel-default" [sourceData]="cascaderMultipleComponent">
        <d-demo-multiple-cascader demo></d-demo-multiple-cascader>
      </d-codebox>
    </div>

    <div class="devui-demo-example" [dAnchor]="'search-cascader'">
      <div class="devui-demo-title">{{ 'components.cascader.searchDemo.title' | translate }}</div>
      <d-codebox id="components-carousel-default" [sourceData]="cascaderSearchComponent">
        <d-demo-search-cascader demo></d-demo-search-cascader>
      </d-codebox>
    </div>

    <div class="devui-demo-example" [dAnchor]="'parent-cascader'">
      <div class="devui-demo-title">{{ 'components.cascader.parentSelectDemo.title' | translate }}</div>
      <div class="devui-demo-text">{{ 'components.cascader.parentSelectDemo.description' | translate }}</div>
      <d-codebox id="components-carousel-default" [sourceData]="cascaderParentSelectComponent">
        <d-demo-parent-select-cascader demo></d-demo-parent-select-cascader>
      </d-codebox>
    </div>

    <div class="devui-demo-example" [dAnchor]="'template-cascader'">
      <div class="devui-demo-title">{{ 'components.cascader.templateDemo.title' | translate }}</div>
      <d-codebox id="components-carousel-default" [sourceData]="cascaderTempComponent">
        <d-demo-template-cascader demo></d-demo-template-cascader>
      </d-codebox>
    </div>

    <div class="devui-demo-example" [dAnchor]="'lazyload-cascader'">
      <div class="devui-demo-title">{{ 'components.cascader.lazyloadDemo.loadChildren' | translate }}</div>
      <d-codebox id="components-carousel-default" [sourceData]="cascaderLazyloadComponent">
        <d-demo-lazyload-cascader demo></d-demo-lazyload-cascader>
      </d-codebox>
    </div>
    <div class="devui-demo-example" [dAnchor]="'cascader-header-template'">
      <div class="devui-demo-title">{{ 'components.cascader.header-templateDemo.title' | translate }}</div>
      <div class="devui-demo-text"></div>
      <d-codebox id="components-carousel-default" [sourceData]="CascaderDemoHeaderTemplate">
        <d-demo-cascader-header-template demo></d-demo-cascader-header-template>
      </d-codebox>
    </div>
  </div>
</div>
